<template>
  <el-container>
    <el-aside v-if="systemStore.isPc">
      <AppMenu />
    </el-aside>
    <div
      v-else
      class="menuDrawer"
    >
      <el-drawer
        v-model="systemStore.isCollapse"
        size="fit-content"
        :with-header="false"
        :show-close="false"
        direction="ltr"
      >
        <AppMenu :drawer="true" />
      </el-drawer>
    </div>
    <el-container>
      <el-header>
        <AppHeader />
      </el-header>
      <el-main>
        <ParentLayout />
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup>
import AppMenu from './AppMenu/index.vue'
import AppHeader from './AppHeader/index.vue'
import ParentLayout from './ParentLayout.vue'

import useSystemStore from '@/store/system'

const systemStore = useSystemStore()

</script>

<style scoped lang="scss">
.el-container {
  height: 100vh;
}

.el-header {
  // box-shadow: 0px 2px 4px -2px #8f8f8f;
  z-index: 10;
  background-color: var(--el-bg-color-overlay);
  height: fit-content;
  padding: 0;
}

.el-aside {
  width: auto;
  max-width: 200px;
}

.menuDrawer {
  :deep(.el-drawer__body) {
    padding: 0;
  }
}

.el-main {
  background-color: var(--el-bg-color);
}

</style>
